<template>
  <div class="chart-outer"></div>
</template>

<script>
import s94 from "s94-js";


// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { LineChart,BarChart,PieChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';
//引入部分组件
import { LegendComponent } from 'echarts/components';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  BarChart,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
]);


export default {
  name: "echart",
  props: {
    type: {type:String, default: 'line'},
    series: {type:Array, default: []},
    labels: {type:Array, default: []},
    options: {type:Object, default: {}}
  },
  emits: ['click'],
  data(){
    return {
      update_ing: false,
    }
  },
  methods: {
    get_option(){
      let type_map = ['line', 'bar', 'pie'];
      let type = ~type_map.indexOf(this.type) ? this.type : 'line';
      let res = {
        series: [],
      };
      switch (type){
        case 'bar':{
          res.xAxis = {data: this.labels};
          res.yAxis = {};
        }break;
        case 'line':{
          res.xAxis = {type: 'category', data: this.labels};
          res.yAxis = {type: 'value'};
        }break;
        case 'pie':{
          res.legend = {
            orient: 'horizontal',
            x: 'center',
            data: this.labels
          }
        }break;
      }
      let series = this.series instanceof Array ? this.series : [this.series];
      let legend = {orient:'horizontal', x:'center', data:[]};
      series.forEach((row)=>{
        row.type = ~type_map.indexOf(row.type) ? row.type : type;
        row.data = row.data || [];
        switch (type) {
          case 'pie':{
            for (let i = 0; i < row.data.length; i++) {
              row.data[i] = typeof row.data[i] === 'object' ? row.data[i] : {value: row.data[i]};
              row.data[i]['name'] = row.data[i]['name'] || this.labels[i] || '';
              legend.data.push(row.data[i]['name']);
            }
          }break;
          case 'line':case 'bar':{
            legend.data.push(row.name);
          }break;
        }
      })
      res.series = series;
      res.legend = legend;
      if (typeof(this.options) == 'object'){
        res = s94.merge(this.options, res)
      }
      return res;
    },
    update(timeout){
      let app = this;
      if (app.update_ing || !app.chart) return;
      app.update_ing = true;
      setTimeout(function(){
        app.update_ing = false;
        let option = app.get_option();
        app.chart.setOption(option);
      }, timeout);
    },
    init(){
      this.chart = echarts.init(this.$el);
      this.chart.on('click', (params)=>{
        this.$emit('click', params);
      });
      this.update(0);
    }
  },
  watch: {

  },
  updated() {
    this.update(10);
  },
  mounted() {
    let app = this;
    setTimeout(()=>{
      this.init();
    },5)
  }
}
</script>

<style scoped>
.chart-outer{width: 100%;max-width: 800px;min-height: 200px;}
</style>